<%--
  Created by IntelliJ IDEA.
  User: bchen
  Date: 2014/8/27
  Time: 21:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="session"/>
<!DOCTYPE html>
<html>
<head>
    <title>ACG_用户登录</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="${path}/plugins/jquery-easyui-1.4.1/jquery.min.js"></script>
    <link href="${path}/style/login/style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        <!--
        body {
            margin-left: 0px;
            margin-top: 0px;
            background-image: url(${path}/style/login/login1_08.gif);
            background-repeat: repeat-x;
            margin-bottom: 0px;
            font-family: "宋体";
            font-size: 12px;
            line-height: 1.5;
            font-weight: normal;
            color: #546D87;
            background-color: #BBD9F5;
        }
        -->

        .code
        {

            font-family:Arial;
            font-style:italic;
            color:Red;
            letter-spacing:3px;
            font-weight:bolder;
            float:left; width:63px; height:26px;border: 1px solid #DDDDDD;
            text-align: center;
            background-color: whitesmoke;
        }
    </style>
    <script>

        (function($){

            $.fn.serializeJson=function(){
                var serializeObj={};
                $(this.serializeArray()).each(function(){
                    serializeObj[this.name]=this.value;
                });
                return serializeObj;
            };
            $.errorHanld=function(msg){
                $("."+msg).fadeIn(1000).fadeOut(5000);
//                $("#jcimg").trigger("click");
                createCode();//刷新验证码
            };
        })(jQuery);

        $(function(){

            createCode();//刷新验证码

            $("#loginsubmit").click(function(){

                if(!validateCode()){
                    return false;
                }

                var data = JSON.stringify($("#loginfrom").serializeJson());
                jQuery.ajax( {
                    type : 'POST',
                    contentType : 'application/json',
                    url : '${path}/login/login.do',
                    data : data,
                    dataType : 'json',
                    success : function(data) {
                        console.log(data);
                        if(data.result){
                            window.location.href = '${path}/admin/index.do';
                        }else{
                            $.errorHanld(data.msg);
                        }
                    },
                    error : function(data) {
                        $.errorHanld(data.msg);
                    }
                });
            });
            document.onkeydown = function(e){
                    var ev = document.all ? window.event : e;
                    if(ev.keyCode==13) {
                        $("#loginsubmit").trigger("click");
                    }
                }
        });


        //-----------------
        var code ; //在全局 定义验证码
        function createCode()
        {
            code = "";
            var codeLength = 5;//验证码的长度
            var checkCode = document.getElementById("checkCode");
            var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');//所有候选组成验证码的字符，当然也可以用中文的

            for(var i=0;i<codeLength;i++)
            {


                var charIndex = Math.floor(Math.random()*36);
                code +=selectChar[charIndex];


            }
//       alert(code);
            if(checkCode)
            {
                checkCode.className="code";
                checkCode.value = code;
            }

        }

        function validateCode ()
        {
            var inputCode = document.getElementById("verifcode").value;

            if(inputCode.toUpperCase() != code )
            {
                $.errorHanld("vercImg");
                return false;
            }
            else
            {
                return true;
            }

        }
    </script>
   </head>

<body>
<form id="loginfrom">
    <table width="990" height="650" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td width="318" valign="top">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td height="299" align="right"><img src="${path}/style/login/login1_01.gif" width="318" height="299" /></td>
                    </tr>
                    <tr>
                        <td height="351" align="right"><img src="${path}/style/login/login1_04.gif" width="318" height="351" /></td>
                    </tr>
                </table>
            </td>
            <td width="366" valign="top">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td height="299" background="${path}/style/login/login_6.gif"><img src="${path}/style/login/login1_02.gif" width="366" height="299" /></td>
                    </tr>
                    <tr>
                        <td height="96" valign="top" background="${path}/style/login/login_9.gif">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td width="25%" height="25" style="color: #ffffff;font-size: 12px;font-weight: bold;text-align:right">账&nbsp;&nbsp;号：</td>
                                    <td width="48%" valign="top">
                                        <label>
                                            <input name="name" type="text" class="txt" size="25" value=""/>
                                            &nbsp;<img class="userImg" src="${path}/style/common/images/erase.png" style="display: none" width="25" height="15" border="0">
                                        </label>
                                    </td>
                                    <td width="27%" rowspan="2"><a href="javascript:void(0);" id="loginsubmit"><img src="${path}/style/login/login_2.gif" width="57" height="55" border="0" /></a></td>
                                </tr>
                                <tr>
                                    <td style="color: #ffffff;font-size: 12px;font-weight: bold;text-align:right">密&nbsp;&nbsp;码：</td>
                                    <td>
                                        <input name="password" type="password" class="txt" size="25" value=""/>
                                        &nbsp;<img class="psdImg" src="${path}/style/common/images/erase.png" style="display: none" width="25" height="15" border="0">
                                    </td>
                                </tr>
                                <tr>
                                    <td style="color: #ffffff;font-size: 12px;font-weight: bold;text-align:right">验证码：</td>
                                    <td colspan="2">
                                        <div style="float: left"> <input id="verifcode" name="verifcode" type="text" style="width:60px;height: 24px" size="6" /></div>
                                        <div style="float: left"> <img class="vercImg" src="${path}/style/common/images/erase.png" style="display: none" width="25" height="15" border="0"></div>
                                       <div style="float: left">
                                           <%--<img id="jcimg" src="${path}/jcaptcha" width="80" height="24" onclick="javascript:this.src='${path}/jcaptcha?'+Math.random();">--%>
                                               <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="imgcode"  />
                                       </div>
                                    </td>
                                </tr>

                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td height="255" background="${path}/style/login/login1_07.gif">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td height="129">&nbsp;</td>
                                </tr>
                                <tr>
                                    <td align="center"> </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
            <td width="318" valign="top">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td height="299" align="left" background="${path}/style/login/login1_03.gif">&nbsp;</td>
                    </tr>
                    <tr>
                        <td height="351" align="left" background="${path}/style/login/login1_06.gif">&nbsp;</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</form>
</body>
</html>

